<template>
  <!-- 号码状态分布图 -->
  <div id="number">
    <div id="numberGraph" style="width:1200px;height:700px"></div>
  </div>
  <!-- 对话时长分布图 -->
  <div id="time">
    <div id="timeGraph" style="width:1200px;height:300px"></div>
  </div>
  <!-- 对话轮次分布图 -->
  <div id="dialogue">
    <div id="dialogueGraph" style="width:1200px;height:400px"></div>
  </div>
  <!-- 短信点击跟踪图-->
  <div id="message">
    <div id="messageGraph" style="width:1200px;height:300px"></div>
  </div>
  <!-- 外呼到达统计 -->
  <div id="arrive">
    <div id="pieGraph" style="width:600px;height:300px;float:left"></div>
    <div id="pie2Graph" style="width:600px;height:300px;float:right"></div>
    <div id="arriveGraph" style="width:1200px;height:800px"></div>
  </div>
  <!-- 意向分布图 -->
  <div id="intent">
    <div id="intentGraph" style="width:1200px;height:500px"></div>
    <!-- 相关意向分布 -->
    <div style="text-align: -webkit-center">
      意向标签：
      <el-button-group @click="search_yxbq">
        <el-button>A</el-button>
        <el-button>B</el-button>
        <el-button>C</el-button>
        <el-button>D</el-button>
        <el-button>E</el-button>
        <el-button>F</el-button>
        <el-button>G</el-button>
        <el-button>H</el-button>
      </el-button-group>
    </div>
    <div id="routeGraph" style="width:1200px;height:400px"></div>
  </div>
  <!-- 标签采集表 -->
  <pro-table
    title="标签采集表"
    :request="getLabel"
    :columns="columns"
    :pagination="pagination"
  ></pro-table>
</template>

<script setup>
import * as API from '@/api/overview'
import * as echarts from 'echarts'
import { ref, reactive, onMounted } from 'vue'

// 图表配置数据
const numberoption = reactive({
  title: [
    { text: '外呼状态分布' },
    {
      left: 'right',
      subtext: '',
      subtextStyle: { fontSize: 18 },
    },
  ],
  grid: { x: '12%', y: '10%', x2: '10%', y2: '10%' },
  tooltip: { show: false, trigger: 'axis' },
  xAxis: { show: false },
  yAxis: {
    axisLine: { show: false },
    axisLabel: { show: true },
    axisTick: { show: false },
    data: [
      '拒接',
      '占线',
      '停机',
      '改号',
      '关机',
      '人工接听',
      '呼叫失败',
      '线路故障',
      '用户欠费',
      '未接',
      '空号',
      '已接通',
    ],
  },
  series: [
    {
      data: [],
      type: 'bar',
      barWidth: 20,
      zlevel: 2,
      label: {
        show: true,
        position: 'inside',
        align: 'center',
        formatter: {},
        color: '#fff',
        fontSize: 12,
      },
      itemStyle: { borderRadius: 10 },
    },
    {
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [],
      label: {
        show: true,
        position: 'right',
        distance: 80,
        align: 'right',
        formatter: {},
        fontSize: 18,
      },
      itemStyle: { borderRadius: 10, color: 'rgba(223,223,223,1)'},
    },
  ],
})

const timeoption = reactive({
  title: [
    { text: '对话时长分布' },
    {
      left: 'right',
      subtext: '',
      subtextStyle: { fontSize: 18 },
    },
  ],
  grid: { x: '12%', y: '10%', x2: '6%', y2: '10%' },
  tooltip: { show: false, trigger: 'axis' },
  xAxis: { show: false },
  yAxis: {
    axisLine: { show: false },
    axisLabel: { show: true },
    axisTick: { show: false },
    data: ['1分钟以上', '30秒-1分钟', '10-30秒', '0-10秒'],
  },
  series: [
    {
      data: [],
      type: 'bar',
      barWidth: 20,
      zlevel: 2,
      label: {
        show: true,
        position: 'inside',
        align: 'center',
        formatter: {},
        color: '#fff',
        fontSize: 12,
      },
      itemStyle: { borderRadius: 10 },
    },
    {
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [],
      label: {
        show: true,
        position: 'right',
        distance: 80,
        align: 'right',
        formatter: {},
        fontSize: 18,
      },
      itemStyle: { borderRadius: 10, color: 'rgba(223,223,223,1)' },
    },
  ],
})

const dialogueoption = reactive({
  title: [
    { text: '对话轮次分布' },
    {
      left: 'right',
      subtext: '',
      subtextStyle: { fontSize: 18 },
    },
  ],
  grid: { x: '12%', y: '10%', x2: '6%', y2: '10%' },
  tooltip: { show: false, trigger: 'axis' },
  xAxis: { show: false },
  yAxis: {
    axisLine: { show: false },
    axisLabel: { show: true },
    axisTick: { show: false },
    data: ['10次以上', '7-9次', '5-6次', '3-4次', '1-2次', '0次'],
  },
  series: [
    {
      data: [],
      type: 'bar',
      barWidth: 20,
      zlevel: 2,
      label: {
        show: true,
        position: 'inside',
        align: 'center',
        formatter: {},
        color: '#fff',
        fontSize: 12,
      },
      itemStyle: { borderRadius: 10 },
    },
    {
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [],
      label: {
        show: true,
        position: 'right',
        distance: 80,
        align: 'right',
        formatter: {},
        fontSize: 18,
      },
      itemStyle: { borderRadius: 10, color: 'rgba(223,223,223,1)' },
    },
  ],
})

const messageoption = reactive({
  title: [{ text: '短信点击跟踪' }],
  grid: { x: '12%', y: '10%', x2: '14%', y2: '10%' },
  tooltip: { show: false, trigger: 'axis' },
  xAxis: {
    show: false,
    type: 'value',
    min: 0,
    max: 100,
    interval: 20,
    axisLabel: { formatter: '{value} %' },
  },
  yAxis: {
    axisLine: { show: false },
    axisLabel: { show: true },
    axisTick: { show: false },
    data: [
      '短信短链发送成功/总数',
      '短链发送成功/总数',
      '短信发送成功/总数',
    ],
  },
  series: [
    {
      name: '发送成功',
      data: [],
      type: 'bar',
      barWidth: 20,
      zlevel: 2,
      label: {
        show: true,
        position: 'inside',
        align: 'center',
        formatter: {},
        color: '#fff',
        fontSize: 12,
      },
      itemStyle: { borderRadius: 10 },
    },
    {
      name: '总数',
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [],
      label: {
        show: true,
        position: 'right',
        distance: 80,
        align: 'right',
        formatter: {},
        fontSize: 18,
      },
      itemStyle: { borderRadius: 10, color: 'rgba(223,223,223,1)' },
    },
  ],
})

const arriveoption = reactive({
  title: [{ text: '外呼到达统计' }],
  grid: { top: '50%', bottom: '10%' },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross', crossStyle: { color: '#999' } },
  },
  legend: {
    data: [
      '已完成外呼数',
      '接听',
      'A,B类意向客户',
      '短信发送数',
      '接通占比',
      'A,B类意向占比',
    ],
    bottom: 20,
  },
  xAxis: [
    {
      type: 'category',
      data: [],
      axisPointer: { type: 'shadow' },
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: { show: true },
      name: '接通数',
      axisLabel: { formatter: '{value} 通' },
    },
    {
      type: 'value',
      axisLine: { show: true },
      name: '占比',
      min: 0,
      max: 100,
      interval: 20,
      axisLabel: { formatter: '{value} %' },
    },
  ],
  series: [
    {
      name: '已完成外呼数',
      type: 'bar',
      tooltip: {
        valueFormatter: value => `${value} 通`,
      },
      data: [],
    },
    {
      name: '接听',
      type: 'bar',
      tooltip: {
        valueFormatter: value => `${value} 通`,
      },
      data: [],
    },
    {
      name: 'A,B类意向客户',
      type: 'bar',
      tooltip: {
        valueFormatter: value => `${value} 通`,
      },
      data: [],
    },
    {
      name: '短信发送数',
      type: 'bar',
      tooltip: {
        valueFormatter: value => `${value} 通`,
      },
      data: [],
    },
    {
      name: '接通占比',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: value => `${value} %`,
      },
      data: [],
    },
    {
      name: 'A,B类意向占比',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: value => `${value} %`,
      },
      data: [],
    },
  ],
})

const pieoption = reactive({
  title: [
    {
      text: '',
      left: '55%',
      top: 'center',
      textStyle: { fontSize: 24, foontWeight: '600' },
    },
    { text: '电话接听占比', left: '50%', bottom: '0' },
  ],
  polar: {
    //极坐标系地底板，类似于grid
    radius: ['60%', '80%'],
    center: ['60%', '50%'],
  },
  angleAxis: {
    //角度轴，一个圆圈
    max: 100,
    show: true,
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
  },
  radiusAxis: {
    //径向轴，一段线段，type:'category'类目轴，类似的x轴的类目轴
    type: 'category',
    show: true,
    axisLabel: { show: true },
    axisLine: { show: true },
    axisTick: { show: true },
  },
  series: [
    {
      name: '电话接听占比',
      type: 'bar', //柱状图
      roundCap: true,
      barWidth: 90,
      showBackground: true,
      data: [],
      coordinateSystem: 'polar', //采用极坐标系
    },
  ],
})

const pie2option = reactive({
  title: [
    {
      text: '',
      left: '25%',
      top: 'center',
      textStyle: { fontSize: 24, foontWeight: '600' },
    },
    { text: 'A、B意向用户占比', left: '15%', bottom: '0' },
  ],
  polar: {
    //极坐标系地底板，类似于grid
    radius: ['60%', '80%'],
    center: ['30%', '50%'],
  },
  angleAxis: {
    //角度轴，一个圆圈
    max: 100,
    show: true,
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
  },
  radiusAxis: {
    //径向轴，一段线段，type:'category'类目轴，类似的x轴的类目轴
    type: 'category',
    show: true,
    axisLabel: { show: true },
    axisLine: { show: true },
    axisTick: { show: true },
  },
  series: [
    {
      name: 'A、B意向用户占比',
      type: 'bar', //柱状图
      roundCap: true,
      barWidth: 90,
      showBackground: true,
      data: [],
      coordinateSystem: 'polar', //采用极坐标系
    },
  ],
})

const intentoption = reactive({
  title: [
    { text: '意向分布' },
    {
      left: 'right',
      subtext: '',
      subtextStyle: { fontSize: 18 },
    },
  ],
  grid: { x: '12%', y: '10%', x2: '7%', y2: '10%' },
  tooltip: { show: true, trigger: 'axis' },
  xAxis: { show: false, type: 'value' },
  yAxis: {
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    data: [
      'H(未接通(黑名单/空号/停机))',
      'G(未接通(用户欠费/不可用/线路故障/呼叫失败/改号))',
      'F(未接通(占线/未接/拒接/关机/无法接通))',
      'E(明确原因拒绝)',
      'D(未明确意愿)',
      'C(有意思未明确尝试)',
      'B(要尝试遇到问题)',
      'A(没问题会尝试)',
    ],
  },
  series: [
    {
      name: '发送成功',
      data: [],
      type: 'bar',
      barWidth: 20,
      zlevel: 2,
      label: {
        show: true,
        formatter: '{b}',
        position: 'left',
        align: 'left',
        offset: [10, -20],
      },
      itemStyle: { borderRadius: 10 },
    },
    {
      name: '总数',
      type: 'bar',
      barWidth: 20,
      barGap: '-100%',
      data: [],
      label: {
        show: true,
        position: 'right',
        distance: 80,
        align: 'right',
        formatter: {},
        fontSize: 18,
      },
      itemStyle: { borderRadius: 10, color: 'rgba(223,223,223,1)' },
    },
  ],
})

const routeoption = reactive({
  title: { text: '相关意向分布' },
  tooltip: { trigger: 'axis' },
  legend: {
    bottom: '30',
    data: ['线路A', '线路B', '线路C', '线路D'],
  },
  grid: { left: '6%', right: '10%', bottom: '20%', containLabel: true },
  xAxis: { type: 'category', boundaryGap: false, data: [] },
  yAxis: {
    type: 'value',
    axisLine: { show: true },
    min: 0,
    max: 100,
    interval: 20,
    axisLabel: { formatter: '{value} %' },
  },
  series: [
    {
      name: '线路A',
      type: 'line',
      tooltip: { valueFormatter: value => `${value} %` },
      data: [],
      smooth: true,
    },
    {
      name: '线路B',
      type: 'line',
      tooltip: { valueFormatter: value => `${value} %` },
      data: [],
      smooth: true,
    },
    {
      name: '线路C',
      type: 'line',
      tooltip: { valueFormatter: value => `${value} %` },
      data: [],
      smooth: true,
    },
    {
      name: '线路D',
      type: 'line',
      tooltip: { valueFormatter: value => `${value} %` },
      data: [],
      smooth: true,
    },
  ],
})

// 搜索意向标签
const search_yxbq = (e) => {
  var f_yxbq = e.target.textContent
  var routeChart = echarts.init(document.getElementById('routeGraph'))
  API.getRouteNum({ F_YXBQ: f_yxbq }).then((res) => {
    for (var j = 0; j < 4; j++) {
      routeoption.series[j].data = []
    }
    routeoption.xAxis.data = []
    res.data.forEach((item) => {
      routeoption.series[0].data.push(
        100 * (item.firstRoute / item.allRoute).toFixed(2)
      )
      routeoption.series[1].data.push(
        100 * (item.secondRoute / item.allRoute).toFixed(2)
      )
      routeoption.series[2].data.push(
        100 * (item.thirdRoute / item.allRoute).toFixed(2)
      )
      routeoption.series[3].data.push(
        100 * (item.fourthRoute / item.allRoute).toFixed(2)
      )
      routeoption.xAxis.data.push(item.time)
    })
    routeChart.setOption(routeoption)
  })
}

// 获取表格数据
const columns = ref([
  { label: '外呼状态', prop: 'rwzt' },
  { label: '外呼网关', prop: 'whwg' },
  { label: '开始通话时间', prop: 'rwqssj' },
  { label: '通话时长', prop: 'thsc' },
  { label: '对话轮次', prop: 'dhlc' },
  { label: '意向标签', prop: 'yxbq' },
  { label: '回复关键词', prop: 'hfgjc' },
])

const pagination = ref({
  layout: 'total, prev, pager, next, sizes', // 分页组件显示哪些功能
  pageSize: 10, // 每页条数
  pageSizes: [5, 10, 20, 50],
})

const getLabel = async (params) => {
  const { data, total } = await API.getLabel({ params })
  return { data, total }
}

onMounted(() => {
  var numberChart = echarts.init(document.getElementById('numberGraph'))
  var timeChart = echarts.init(document.getElementById('timeGraph'))
  var dialogueChart = echarts.init(document.getElementById('dialogueGraph'))
  var messageChart = echarts.init(document.getElementById('messageGraph'))
  var arriveChart = echarts.init(document.getElementById('arriveGraph'))
  var pieChart = echarts.init(document.getElementById('pieGraph'))
  var pie2Chart = echarts.init(document.getElementById('pie2Graph'))
  var intentChart = echarts.init(document.getElementById('intentGraph'))
  var routeChart = echarts.init(document.getElementById('routeGraph'))

  // 号码状态分布
  API.getServiceNum({}).then((res) => {
    var numberdata = []
    var sum = 0
    for (var i = 3; i < res.data.length; i++) {
      numberoption.series[0].data.push(res.data[i])
      numberdata.push(res.data[i])
      sum += res.data[i]
    }
    numberdata.push(res.data[0] + res.data[1] + res.data[2])
    var all = sum + res.data[0] + res.data[1] + res.data[2]
    numberoption.series[0].data.push(res.data[0] + res.data[1] + res.data[2])
    numberoption.series[1].data = res.data.map((item) => ({
      realValue: item,
      value: all,
    }))
    numberoption.series[1].label.formatter = (params) => {
      let num = (numberdata[params.dataIndex] / all) * 100
      return num.toFixed(2) + '%'
    }
    numberoption.title[1].subtext = '外呼总数:' + all
    numberChart.setOption(numberoption)
  })

  // 对话时长分布
  API.getTimeCut({}).then((res) => {
    var timedata = [
      res.data[0].more,
      res.data[0].sixty,
      res.data[0].thirty,
      res.data[0].ten,
    ]
    var sum =
      res.data[0].ten + res.data[0].thirty + res.data[0].sixty + res.data[0].more
    for (var i = 0; i < 4; i++) {
      timeoption.series[0].data.push(timedata[i])
      timeoption.series[1].data.push(sum)
    }
    timeoption.series[1].label.formatter = (params) => {
      let num = (timedata[params.dataIndex] / sum) * 100
      return num.toFixed(2) + '%'
    }
    timeoption.title[1].subtext = '接听总数:' + sum
    timeChart.setOption(timeoption)
  })

  // 对话轮次分布
  API.getDiaNum({}).then((res) => {
    var diadata = [
      res.data[0].diaMore,
      res.data[0].nine,
      res.data[0].six,
      res.data[0].four,
      res.data[0].two,
      res.data[0].zero,
    ]
    var sum =
      res.data[0].zero +
      res.data[0].two +
      res.data[0].four +
      res.data[0].six +
      res.data[0].nine +
      res.data[0].diaMore
    for (var i = 0; i < 6; i++) {
      dialogueoption.series[0].data.push(diadata[i])
      dialogueoption.series[1].data.push(sum)
    }
    dialogueoption.series[1].label.formatter = (params) => {
      let num = (diadata[params.dataIndex] / sum) * 100
      return num.toFixed(2) + '%'
    }
    dialogueoption.title[1].subtext = '接听总数:' + sum
    dialogueChart.setOption(dialogueoption)
  })

  // 短信点击跟踪
  API.getMessageNum({}).then((res) => {
    var MCSucdata = [res.data[0].mcsuc, res.data[0].csuc, res.data[0].msuc]
    var MCNumdata = [res.data[0].mcnum, res.data[0].cnum, res.data[0].mnum]
    for (var i = 0; i < 3; i++) {
      messageoption.series[0].data.push((MCSucdata[i] * 100) / MCNumdata[i])
      messageoption.series[1].data.push(100)
    }
    messageoption.series[0].label.formatter = (params) => {
      let sucnum = MCSucdata[params.dataIndex]
      return sucnum + ' 条'
    }
    messageoption.series[1].label.formatter = (params) => {
      let num = ((MCSucdata[params.dataIndex] / MCNumdata[params.dataIndex]) * 100).toFixed(2)
      let all = MCNumdata[params.dataIndex]
      return all + ' 条\n' + num + ' %'
    }
    messageChart.setOption(messageoption)
  })

  // 外呼到达统计
  API.getArriveNum({}).then((res) => {
    for (var i = res.data.length - 5; i < res.data.length; i++) {
      arriveoption.xAxis[0].data.push(res.data[i].time)
    }
    for (var j = res.data.length - 5; j < res.data.length; j++) {
      arriveoption.series[0].data.push(res.data[j].callNum)
      arriveoption.series[1].data.push(res.data[j].answerNum)
      arriveoption.series[2].data.push(res.data[j].abnum)
      arriveoption.series[3].data.push(res.data[j].messageNum)
      if (res.data[j].callNum != 0) {
        arriveoption.series[4].data.push(
          ((100 * res.data[j].answerNum) / res.data[j].callNum).toFixed(2)
        )
        arriveoption.series[5].data.push(
          ((100 * res.data[j].abnum) / res.data[j].callNum).toFixed(2)
        )
      } else {
        arriveoption.series[4].data.push('0')
        arriveoption.series[5].data.push('0')
      }
    }

    var callnum = 0
    var answernum = 0
    var abnum = 0
    for (var z = 0; z < res.data.length; z++) {
      callnum += res.data[z].callNum
      answernum += res.data[z].answerNum
      abnum += res.data[z].abnum
    }
    pieoption.series[0].data.push(
      Math.round((100 * answernum) / callnum)
    )
    pieoption.title[0].text =
      Math.round((100 * answernum) / callnum) + ' %\n' + callnum + ' 通'
    pie2option.series[0].data.push(Math.round((100 * abnum) / callnum))
    pie2option.title[0].text =
      Math.round((100 * abnum) / callnum) + ' %\n' + callnum + ' 通'
    arriveChart.setOption(arriveoption)
    pieChart.setOption(pieoption)
    pie2Chart.setOption(pie2option)
  })

  // 意向分布数据
  API.getIntentNum({}).then((res) => {
    var intentdata = [
      res.data[0].hnum,
      res.data[0].gnum,
      res.data[0].fnum,
      res.data[0].enum,
      res.data[0].dnum,
      res.data[0].cnum,
      res.data[0].bnum,
      res.data[0].anum,
    ]
    for (var i = 0; i < 8; i++) {
      intentoption.series[0].data.push(intentdata[i])
      intentoption.series[1].data.push(res.data[0].allNum)
    }
    intentoption.series[1].label.formatter = (params) => {
      let num = (intentdata[params.dataIndex] / res.data[0].allNum) * 100
      return num.toFixed(2) + '%'
    }
    intentoption.title[1].subtext = '意向总数:' + res.data[0].allNum
    intentChart.setOption(intentoption)
  })

  API.getRouteNum({}).then((res) => {
    res.data.forEach((item) => {
      routeoption.series[0].data.push(
        100 * (item.firstRoute / item.allRoute).toFixed(2)
      )
      routeoption.series[1].data.push(
        100 * (item.secondRoute / item.allRoute).toFixed(2)
      )
      routeoption.series[2].data.push(
        100 * (item.thirdRoute / item.allRoute).toFixed(2)
      )
      routeoption.series[3].data.push(
        100 * (item.fourthRoute / item.allRoute).toFixed(2)
      )
      routeoption.xAxis.data.push(item.time)
    })
    routeChart.setOption(routeoption)
  })
})
</script>
